import { Typography, Popconfirm, Space, TableColumnsType } from 'antd'
import type { ITableData } from './types'
const type = { ROUTE: '路由', MENU: '菜单', FUNCTION: '功能' } as Record<string, any>
export const useIndexColumns = (
  onEdit: (info: ITableData) => void,
  showFuncList: (info: ITableData) => void,
  onDel: (id: number) => void,
): TableColumnsType<ITableData> => [
  {
    title: '路由名称',
    dataIndex: 'name',
    align: 'center',
    key: 'name',
    width: 200,
    render: (info) => {
      return info ? info : '-'
    },
  },
  {
    title: '路径',
    dataIndex: 'path',
    align: 'center',
    key: 'path',
    width: 150,
    render: (info) => {
      return info ? info : '-'
    },
  },
  {
    title: '全路径',
    width: 150,
    dataIndex: 'fullPath',
    align: 'center',
    key: 'fullPath',
    render: (info) => {
      return <Typography.Paragraph copyable={{ tooltips: info, text: info }}></Typography.Paragraph>
    },
  },
  {
    title: '页面地址',
    width: 100,
    dataIndex: 'resourcePath',
    align: 'center',
    key: 'resourcePath',
    render: (info) => {
      return info ? <Typography.Paragraph copyable={{ tooltips: info, text: info }}></Typography.Paragraph> : '-'
    },
  },
  {
    title: '图标',
    dataIndex: 'icon',
    width: 100,
    align: 'center',
    key: 'icon',
    ellipsis: {
      showTitle: true,
    },
    render: (info) => {
      return <Typography.Paragraph copyable={{ tooltips: info, text: info }}></Typography.Paragraph>
    },
  },
  {
    title: '类型',
    dataIndex: 'type',
    align: 'center',
    key: 'type',
    render: (info) => {
      return type[info] || '-'
    },
  },
  {
    title: '排序',
    dataIndex: 'sorted',
    align: 'center',
    key: 'sorted',
    render: (info) => {
      return info ? info : '-'
    },
  },
  {
    fixed: 'right',
    title: '操作',
    width: 230,
    render: (info) => {
      return (
        <Space size="large">
          <Typography.Link
            onClick={() => {
              onEdit(info)
            }}
          >
            编辑
          </Typography.Link>
          <Popconfirm title={`确认删除吗？`} onConfirm={() => onDel(info.id)} okText="确认" cancelText="取消">
            <Typography.Link>删除</Typography.Link>
          </Popconfirm>
          {info.function && info.function.length > 0 ? (
            <Typography.Link
              onClick={() => {
                showFuncList(info)
              }}
            >
              功能列表
            </Typography.Link>
          ) : (
            ''
          )}
        </Space>
      )
    },
  },
]
